<template>
	<view class="custom-tab-bar">
		<view class="tab-bar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item)">
			<image :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath" class="tab-bar-icon"></image>
			<text :class="['tab-bar-text', currentPath === item.pagePath ? 'active' : '']">{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'custom-tab-bar',
		data() {
			return {
				currentPath: '',
				tabList: [{
					pagePath: '/pages/index/index',
					iconPath: '/static/tabbar/index.png',
					selectedIconPath: '/static/tabbar/index-select.png',
					text: '首页'
				}, {
					pagePath: '/pages/vacancy/vacancy',
					iconPath: '/static/tabbar/vacancy.png',
					selectedIconPath: '/static/tabbar/vacancy-select.png',
					text: '岗位'
				}, {
					pagePath: '/pages/resume/resume-list',
					iconPath: '/static/tabbar/vacancy.png',
					selectedIconPath: '/static/tabbar/vacancy-select.png',
					text: '简历'
				}, {
					pagePath: '/pages/message/message',
					iconPath: '/static/tabbar/message.png',
					selectedIconPath: '/static/tabbar/message-select.png',
					text: '消息'
				}, {
					pagePath: '/pages/mine/mine',
					iconPath: '/static/tabbar/mine.png',
					selectedIconPath: '/static/tabbar/mine-select.png',
					text: '我的'
				}]
			}
		},
		created() {
			// 获取当前页面路径
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			this.currentPath = '/' + currentPage.route;
			
			// 根据用户角色过滤tabList
			const user = uni.getStorageSync('user');
			if (user && user.role === 'company') {
				this.tabList = this.tabList.filter(item => item.text !== '岗位');
			} else {
				this.tabList = this.tabList.filter(item => item.text !== '简历');
			}
		},
		methods: {
			switchTab(item) {
				if (this.currentPath === item.pagePath) return;
				uni.redirectTo({
					url: item.pagePath,
					fail: (err) => {
						console.error('跳转失败：', err);
						uni.navigateTo({
							url: item.pagePath
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 999;
		
		.tab-bar-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.tab-bar-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}
			
			.tab-bar-text {
				font-size: 24rpx;
				color: #7A7E83;
				
				&.active {
					color: #2979ff;
				}
			}
		}
	}
</style> 